import { Badge, Box, HorizontalStack, Text, VerticalStack } from "@shopify/polaris"
import func from "@/util/func"
import Issue from "./Issue"

function Category({ index, issue, subCategoryMap, viewMode = 'syntax' }) {
    const severity = func.getRunResultSeverity(issue.vulnerableTestingRunResults[0], subCategoryMap)
    return (
        <Box id={issue.testName}>
            <VerticalStack gap="4">
                <VerticalStack gap={2}>
                    <HorizontalStack gap={2}>
                        <Text variant='headingMd'>2.{index + 1} {issue.testName}</Text>

                        <div className={`badge-wrapper-${severity}`}>
                            <Badge size="small">{func.toSentenceCase(severity)}</Badge>
                        </div>

                        <Badge size="small"><Text variant="bodySm">{issue.vulnerableTestingRunResults.length} API affected</Text></Badge>
                    </HorizontalStack>
                    <Text>{issue.issueDetails}</Text>
                </VerticalStack>

                <HorizontalStack gap={1}>
                    <Text variant="headingSm">Category:</Text>
                    <Text variant="headingSm" color="subdued">{issue.superCategory.shortName}</Text>
                </HorizontalStack>

                <VerticalStack gap={1}>
                    <Text variant="headingSm">Impact</Text>
                    <Text>{issue.issueImpact}</Text>
                </VerticalStack>

                {   
                    issue.vulnerableTestingRunResults.map((vulnerableTestingRunResult, index) => {
                        return ( <Issue testResults={issue.testResults} vulnerableApi={vulnerableTestingRunResult} cwes={(issue?.cwe || [])}  compliance={issue?.compliance} references={(issue?.references || [])} viewMode={viewMode} /> )
                    })
                }
                
            </VerticalStack>
        </Box>
    )
}

export default Category